<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<nav th:fragment="receiver_nav" class="bar bar-tab">
	    <a class="tab-item" v-for="nav in navs" :class="nav.active" @click="nav.option">
	        <span class="iconfont" :class="nav.icon"></span>
	        <span class="tab-label">{{nav.title}}</span>
	        <span class="badge" v-if="nav.badge > 0">{{nav.badge}}</span>
	    </a>
	</nav>
	<div th:fragment="receiverPage" class="content">
		<div class="card" v-for="receiver in receivers">
			<div class="card-content">
				<div class="list-block media-list">
					<ul>
						<li>
							<label class="item-link label-checkbox item-content" @click="checkReceiver(receiver)">
								<input type="radio" name="my-radio" :value="receiver.id">
		     					<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
								<div class="item-inner" @click="goBackPage(receiver)">
									<div class="item-title-row">
										<div class="item-title">{{receiver.receiver}}</div>
										<div class="item-after">{{receiver.phone}}</div>
									</div>
									<div class="item-subtitle">{{receiver.province + receiver.city + receiver.region}}</div>
									<div class="item-text">{{receiver.address}}</div>
								</div>
							</label>
						</li>
					</ul>
				</div>
			</div>
			<div class="card-footer">
				<span>
					<label :class="receiver.isDefault ? 'button-warning': ''"><input type="checkbox" :disabled="receiver.isDefault" v-model="receiver.isDefault" @change="setDefault(receiver)">&nbsp;{{receiver.isDefault ? "默认地址" : "设为默认"}}</label>
           		</span>
				<span class="button-bar clearfix">
					<a href="javascript:void(0);" class="button button-warning" @click="editReceiver(receiver)">修改</a>
					<a href="javascript:void(0);" class="button button-danger" @click="removeReceiver(receiver)">删除</a>
				</span>
			</div>
		</div>
	</div>
	<div th:fragment="receiverEditPage" class="content">
		<div class="list-block">
			<ul>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-name"></i>
						</div>
						<div class="item-inner">
							<div class="item-title label">姓名</div>
							<div class="item-input">
								<input type="text" v-model="form.receiver" placeholder="请输入收货人姓名">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-name"></i>
						</div>
						<div class="item-inner">
							<div class="item-title label">联系电话</div>
							<div class="item-input">
								<input type="text" v-model="form.phone" placeholder="请输入收货人联系电话">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-name"></i>
						</div>
						<div class="item-inner">
							<div class="item-title label">收货地区</div>
							<div class="item-input">
								<input id="cityPicker" type="text">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-media">
							<i class="icon icon-form-name"></i>
						</div>
						<div class="item-inner">
							<div class="item-title label">详细地址</div>
							<div class="item-input">
								<input type="text" v-model="form.address" placeholder="请输入街道、小区等详细地址">
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="content-block">
    		<p><a href="javascript:void(0);" class="button button-big" @click="postReceiver">提&nbsp;&nbsp;&nbsp;&nbsp;交</a></p>
    	</div>
	</div>
</body>
</html>